import { ArrowRight } from "@nutui/icons-react-taro";
import { Button, Cell, Form, Input, Picker } from "@nutui/nutui-react-taro";
import "./index.less";
import { useRequest } from "ahooks";
import {
  bindCouponApi,
  getCouponConfigApi,
  userCheckApi,
} from "../../../servers/servers";
import { useState } from "react";
import Taro from "@tarojs/taro";

const coupon = () => {
  // 优惠券配置
  const { data: courpOpt } = useRequest(async () => {
    const _res = await getCouponConfigApi();

    return _res?.data?.map((_item) => {
      return {
        value: _item?.value,
        text: `${_item?.label} ${
          _item?.frequency >= 0 ? `(${_item?.frequency})` : ""
        }`,
      };
    });
  });

  const [form] = Form.useForm();

  // 查询结果
  const [result, setResult] = useState("");

  const { loading, runAsync } = useRequest(
    async (values) => {
      return await bindCouponApi({
        ...values,
      });
    },
    {
      manual: true,
    }
  );

  return (
    <>
      <Cell.Group>
        <Cell
          title={
            <div style={{ display: "flex", alignItems: "center" }}>
              <h3>优惠券发放</h3>
            </div>
          }
        />
        <Cell>
          <Form
            form={form}
            className="coupon_form"
            style={{
              width: "100%",
              "--nutui-form-item-label-width": "40px",
            }}
            footer={false}
            onFinish={async (values) => {
              Taro.showModal({
                title: "确定发放吗？",
                content: `确定将优惠券发放给${values?.mobile}吗？`,
                success: async (res) => {
                  if (res.confirm) {
                    try {
                      Taro.showLoading({
                        title: "发放中...",
                      });
                      const { data } = await runAsync({
                        ...values,
                      });
                      Taro.showToast({
                        title: "发放成功",
                        icon: "none",
                        duration: 2000,
                      });

                      Taro.hideLoading();
                      setResult(data?.msg);
                    } catch (error) {
                      Taro.hideLoading();
                      setResult(error?.msg);
                    }
                  }
                },
              });
            }}
          >
            <Form.Item
              label="电话号码"
              name="mobile"
              className="asqweryqweioryu"
              rules={[{ required: true }]}
            >
              <Input
                style={{
                  height: "120rpx",
                  borderRadius: "20rpx",
                  border: "1px solid #DFE2EB",
                  paddingLeft: 12,
                }}
                placeholder="请输入电话号码"
                type="digit"
              />
            </Form.Item>

            <Form.Item
              label="发放类型"
              name="coupon"
              className="asqweryqweioryu"
              trigger="onConfirm"
              getValueFromEvent={(...args) => args[1]}
              onClick={(event, ref) => {
                ref.open();
              }}
              rules={[{ required: true, message: "请选择发放类型" }]}
            >
              <Picker
                options={[courpOpt]}
                style={{
                  "--nutui-picker-item-text-font-size": "30px",
                }}
              >
                {(value) => {
                  return (
                    <Cell
                      style={{
                        padding: 0,
                        "--nutui-cell-divider-border-bottom": "0",
                        height: "120rpx",
                        borderRadius: "20rpx",
                        border: "1px solid #DFE2EB",
                        paddingLeft: 12,
                        width: "100%",
                      }}
                      className="nutui-cell--clickable"
                      title={
                        value.length ? (
                          <div style={{ width: 200 }}>
                            {
                              courpOpt.filter((po) => po.value === value[0])[0]
                                ?.text
                            }
                          </div>
                        ) : (
                          "请选择优惠券"
                        )
                      }
                      extra={<ArrowRight />}
                      align="center"
                    />
                  );
                }}
              </Picker>
            </Form.Item>
          </Form>
        </Cell>

        <Cell>
          <Button
            block
            type="primary"
            size="xlarge"
            onClick={() => {
              form.submit();
            }}
            loading={loading}
          >
            提交
          </Button>
        </Cell>

        <Cell>
          <Button
            block
            type="primary"
            fill="outline"
            size="xlarge"
            onClick={() => {
              // Taro.navigateTo({
              //   url: "/pages/cart/binding/bingdinLog/index",
              // });
              Taro.navigateTo({
                url: `/pages/cart/coupon/couponLog/index`,
              });
            }}
          >
            操作日志
          </Button>
        </Cell>

        <Cell> {result ? <>发放结果：{result} </> : ""}</Cell>
      </Cell.Group>

      <Cell.Group></Cell.Group>
    </>
  );
};

export default coupon;
